require('./init');
const fbtn = require('@/assets/images/fbtn.png');

const myFloat = {
    fb: null,
    init: function () {
        const self = this;
        if (this.fb) {
            return;
        }
        this.fb = new FloatButton();
        this.fb.setIcon(fbtn);
        //设置logo图标着色
        //fb.setTint('#FFFFFF');
        //设置logo背景颜色
        this.fb.setColor('#FFFFFF');
        //设置所有按钮大小 默认40
        this.fb.setAllButtonSize(40);
        //设置所有按钮内边距 默认8
        this.fb.setMenuRadius(36);
        this.fb.setAllButtonPadding(6);
        //添加菜单按钮
        this.fb.addItem('按钮1')
            //设置图标
            .setIcon('@drawable/ic_looks_one_black_48dp')
            //图标着色
            .setTint('#FFFFFF')
            //背景颜色
            .setColor('#019581')
            //点击事件
            .onClick((view, name) => {
                toastLog('onClick:' + name)
                //返回 true:保持菜单开启 false:关闭菜单
                return false;
            });

        this.fb.addItem('按钮2')
            //启用复选框属性
            .toCheckbox(mUtil => {
                //未选中样式
                mUtil.icon1('@drawable/ic_play_arrow_black_48dp').tint1('#FFFFFF').color1('#41A4F5');
                //选中样式
                mUtil.icon2('@drawable/ic_stop_black_48dp').tint2('#FFFFFF').color2('#ED524E');
            })
            .onClick((view, name, state) => {
                toastLog('名称 : ' + name + '\n状态 : ' + state);
                // ui.btn.setText(state ? '停 止' : '启 动');
                // ui.btn.attr('backgroundTint', state ? '#ED524E' : '#41A4F5');
                //返回 true:保持菜单开启 false:关闭菜单
                return true;
            });

        this.fb.addItem('按钮3')
            .setIcon('@drawable/ic_looks_3_black_48dp')
            .setTint('#FFFFFF')
            .setColor('#ED524E');

        // this.fb.addItem('按钮4')
        //     .setIcon('@drawable/ic_looks_4_black_48dp')
        //     .setTint('#FFFFFF')
        //     .setColor('#FCD633');

        // this.fb.addItem('按钮5')
        //     .setIcon('@drawable/ic_looks_5_black_48dp')
        //     .setTint('#FFFFFF')
        //     .setColor('#BFBFBF');

        //在无操作一段时间后自动关闭菜单
        self.fb.setAutoCloseMenuTime(3000);
        self.fb.show();

        //菜单按钮点击事件
        this.fb.on('item_click', (view, name, state) => {
            //如果在addItem中添加了onClick事件 则不会在这里触发
            toastLog('item_click:' + name);
            //返回 true:保持菜单开启 false:关闭菜单
            return false;
        });

        //UI联动
        //菜单状态改变事件
        this.fb.on('menu_state_changed', value => {
            // ui.menu.setText('菜单状态 : ' + (value ? '开启' : '关闭'));
            // ui.menu.setChecked(value);
            console.log(value);
        });

        //停靠方向改变事件
        this.fb.on('direction_changed', value => {
            // ui.direction.setText('停靠方向 : ' + (value ? '右侧' : '左侧'));
            console.log(value);
        });

        //屏幕方向改变事件
        this.fb.on('orientation_changed', value => {
            log('屏幕方向:', value);
            // ui.orientation.setText('屏幕方向 : ' + (value ? '横屏' : '竖屏'));
        });

        //按钮显示事件
        this.fb.on('show', () => {
            log('悬浮窗显示');
        });

        //按钮隐藏事件
        this.fb.on('hide', () => {
            log('悬浮窗隐藏');
        });
    }
}

export default myFloat;